<template>
    <div class="container">
        <van-tabs v-model="tabValue" sticky swipeable @change="tabChange" class="reset">
            <!-- <div slot="nav-right">
                 <van-button icon="plus" size="normal" type="default" @click="addBtn(tabValue)" plain></van-button>
             </div>-->
            <!--{{formData.address}}-{{formData.person}}-{{formData.children}}-->
            <!--            <van-tab title="多处住所" class="inner-box">-->
            <!--                <template v-for="(item, index) in formData.address">-->
            <!--                    <van-cell-group :key="index">-->
            <!--                        <div>-->
            <!--                            <van-row>-->
            <!--                                <van-col span="20">-->
            <!--                                    <div class="suggest van-cell van-field" @click="chooseMap('address', index)">-->
            <!--                                        <div class="address-placeholder">-->
            <!--                                            <span v-if="!item.loc_title && !item.loc_address">请选择地址（{{parseInt(index)+1}}）</span>-->
            <!--                                            <span v-else>&nbsp;</span>-->
            <!--                                        </div>-->
            <!--                                        <div class="van-cell__value">-->
            <!--                                            <div class="address-box">{{item.loc_title}}</div>-->
            <!--                                            <div class="address-box">{{ item.loc_address}}</div>-->
            <!--                                        </div>-->
            <!--                                    </div>-->
            <!--                                </van-col>-->
            <!--                                <van-col span="4">-->
            <!--                                    <van-button class="del-btn" size="mini" round icon="cross"-->
            <!--                                                type="danger" @click="delBtn('address', item.id, index)" plain-->
            <!--                                                hairline></van-button>-->
            <!--                                </van-col>-->
            <!--                            </van-row>-->
            <!--                        </div>-->
            <!--                    </van-cell-group>-->
            <!--                </template>-->
            <!--            </van-tab>-->
            <van-tab title="儿童代办" class="inner-box">
                <template v-for="(item, index) in formData.children">
                    <van-cell-group :key="index">
                        <div>
                            <van-field
                                    v-model="item.name"
                                    clearable
                                    @blur="bodyScrollTop"
                                    :maxlength="20"
                            >
                            </van-field>
                            <van-field
                                    v-model="item.relation"
                                    clearable
                                    @blur="bodyScrollTop"
                                    :maxlength="20"
                            >
                            </van-field>
                            <van-field
                                    v-model="item.cardno"
                                    clearable
                                    @blur="bodyScrollTop"
                                    :maxlength="20"
                            >
                            </van-field>
                            <van-row style="padding: .625rem 1rem;">
                                <van-col span="15">
                                </van-col>
                                <van-col span="4">
                                    <van-button class="del-btn" size="mini" round icon="cross"
                                                type="danger"
                                                @click="delBtn('children', item.id, index)"
                                                plain
                                                hairline></van-button>
                                </van-col>
                                <van-col span="1">
                                </van-col>
                                <van-col span="4">
<!--                                    @click="delBtn('children', item.id, index)" &ndash;&gt;-->
                                    <van-button class="del-btn" size="mini" round icon="edit"
                                                type="danger"
                                                @click="edit('0',item.cardno,item.id,item.name,item.relation)"
                                                plain
                                                hairline></van-button>
                                </van-col>
                            </van-row>
                        </div>
                    </van-cell-group>
                </template>
<!--                v-if="formData.children.length<3"-->
                <div class="div-bot" >
                    <van-button round block type="info" @click="childrenSubmit" class="city-card-common-btn">
                        添加
                    </van-button>
                </div>
            </van-tab>
            <van-tab title="父母代办" class="inner-box">
                <template v-for="(item, index) in formData.person">
                    <van-cell-group :key="index">
                        <div>
                            <van-field
                                    v-model="item.name"
                                    clearable
                                    @blur="bodyScrollTop"
                                    :maxlength="20"
                            >
                            </van-field>

                            <van-field
                                    v-model="item.relation"
                                    clearable
                                    @blur="bodyScrollTop"
                                    :maxlength="20"
                            >
                            </van-field>

                            <van-field
                                    v-model="item.cardno"
                                    clearable
                                    :maxlength="20"
                                    @blur="bodyScrollTop"
                            >
                            </van-field>
                            <van-row style="padding: .625rem 1rem;">
                                <van-col span="15">
                                </van-col>
                                <van-col span="4">
                                    <van-button class="del-btn" size="mini" round icon="cross"
                                                type="danger"
                                                @click="delBtn('children', item.id, index)"
                                                plain
                                                hairline></van-button>
                                </van-col>
                                <van-col span="1">
                                </van-col>
                                <van-col span="4">
                                    <van-button class="del-btn" size="mini" round icon="edit"
                                                type="danger"
                                                @click="edit('1',item.cardno,item.id,item.name,item.relation)"
                                                plain
                                                hairline></van-button>
                                </van-col>
                            </van-row>
<!--                            <van-row>-->
<!--                                <van-col span="20">-->
<!--                                    <div class="suggest van-cell van-field" @click="chooseMap('person', index)">-->
<!--                                        <div class="address-placeholder">-->
<!--                                            <span v-if="!item.loc_title && !item.loc_address">请选择地址（{{parseInt(index)+1}}）</span>-->
<!--                                            <span v-else>&nbsp;</span>-->
<!--                                        </div>-->
<!--                                        <div class="van-cell__value">-->
<!--                                            <div class="address-box">{{item.loc_title}}</div>-->
<!--                                            <div class="address-box">{{ item.loc_address}}</div>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </van-col>-->
<!--                                <van-col span="4">-->
<!--                                    <van-button class="del-btn" size="mini" round icon="cross"-->
<!--                                                type="danger" @click="delBtn('person', item.id, index)" plain-->
<!--                                                hairline></van-button>-->
<!--                                </van-col>-->
<!--                            </van-row>-->
                        </div>
                    </van-cell-group>
                </template>
<!--                v-if="formData.person.length<3"-->
                <div class="div-bot" >
                    <van-button round block type="info" @click="personSubmit" class="city-card-common-btn">
                        添加
                    </van-button>
                </div>
            </van-tab>
            <!-- <van-tab title="" title-style="display: none;"></van-tab>-->
        </van-tabs>
<!--        <div class="add—style">-->
<!--            <van-button icon="plus" size="normal" type="default" @click="addBtn(tabValue)" plain>-->
<!--                <span>添加</span>-->
<!--            </van-button>-->
<!--        </div>-->
        <van-popup
                v-model="mapShow"
                closeable
                position="bottom"
                :style="{ height: '90%' }"
        >
            <tabs-map :map-type="mapObj.mapType" :map-index="mapObj.mapIndex"
                      @mapChangeAction="mapChangeAction"></tabs-map>
        </van-popup>
    </div>
</template>

<script>
import {
  insertPermitAddress,
  insertPermitPerson,
  insertPermitChildren,
  // getPermitAddressList,
  getPermitPersonList,
  getPermitChildrenList,
  deletePermitAddress,
  deletePermitPerson,
  deletePermitChildern,
  getOpenidMsg
} from '@/api/yi-qing-fang-kong.js'
// 工具
import { identityCodeValid } from '@/libs/tools'
// vant组件
import {
// Dialog,
  Toast
} from 'vant'
import TabsMap from '../tabs-map/index'

export default {
  name: 'EpidemicNewlyHandle',
  components: { TabsMap },
  data () {
    return {
      mine_card_no: '',
      tabValue: 0,
      mapShow: false,
      mapSelectData: {
        point: {}
      },
      mapObj: {
        mapType: '',
        mapIndex: 0
      }
    }
  },
  props: {
    formData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    newlyAddedType: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  methods: {
    getOpenidInfoAction () {
      getOpenidMsg().then(ret => {
        console.log('判断是否注册过', ret.data)
        if (ret.data.errcode === 0) {
          this.mine_card_no = ret.data.data.result.card_no
          // if (!this.$common.xeUtils.isEmpty(ret.data.data.result)) {
          // this.successModel = true
          // this.$router.push({
          //   name: 'epidemic-submit-success',
          //   query: {}
          // })
          // }
        } else {
          // this.failNotice(ret.data.errmsg)
        }
      })
    },
    childrenSubmit () {
      if (this.newlyAddedType === '1') {
        this.$router.push({
          name: 'epidemic-newly-added-waiji',
          query: { type: '0' }
        })
      } else {
        this.$router.push({
          name: 'epidemic-newly-added-new',
          query: { type: '0' }
        })
      }
    },
    personSubmit () {
      if (this.newlyAddedType === '1') {
        this.$router.push({
          name: 'epidemic-newly-added-waiji',
          query: { type: '1' }
        })
      } else {
        this.$router.push({
          name: 'epidemic-newly-added-new',
          query: { type: '1' }
        })
      }
    },
    edit (type, cardno, id) {
      this.$router.push({
        name: 'epidemic-newly-added-update-new',
        query: { type: type, cardno: cardno, id: id }
      })
    },
    mapChangeAction (data, type, index) {
      console.log(data, '--', type, '--', index)
      this.mapShow = false
      switch (type) {
        case 'address':
          this.formData.address[index].loc_address = data.address
          this.formData.address[index].loc_title = data.title
          this.formData.address[index].loc_province = data.province
          this.formData.address[index].loc_city = data.city
          this.formData.address[index].longitude = data.point.lng
          this.formData.address[index].latitude = data.point.lat
          break
        case 'person':
          this.formData.person[index].loc_address = data.address
          this.formData.person[index].loc_title = data.title
          this.formData.person[index].loc_province = data.province
          this.formData.person[index].loc_city = data.city
          this.formData.person[index].longitude = data.point.lng
          this.formData.person[index].latitude = data.point.lat
          break
      }
    },
    tabChange (val) {
      // console.log(val, 'tab下标')
    },
    chooseMap (type, index) {
      this.mapShow = true
      console.log(type, index, '地图跳页参数')
      this.mapObj.mapType = type
      this.mapObj.mapIndex = index
    },
    // 去苹果机型白边
    bodyScrollTop () {
      winToTop()
      // document.body && (document.body.scrollTop = 0)
    },
    addBtn (type) {
      console.log(type, '选择的参数')
      // let addressLength = this.formData.address.length
      let personLength = this.formData.person.length
      let childrenLength = this.formData.children.length
      switch (type) {
        case 0:
          if (childrenLength > 0 &&
this.formData.children[childrenLength - 1].relation !== '' &&
this.formData.children[childrenLength - 1].name !== '' &&
this.formData.children[childrenLength - 1].cardno !== '') {
            // this.formData.children.push({ relation: '', name: '', cardno: '' })
          } else if (childrenLength === 0) {
            // this.formData.children.push({ relation: '', name: '', cardno: '' })
          } else {
            Toast.fail('请填写完当前项后再进行添加！')
          }
          break
          // case 0:
          //   if (addressLength > 0 &&
          //         this.formData.address[addressLength - 1].loc_address !== '') {
          //     this.formData.address.push({ loc_province: '', loc_city: '', loc_title: '', loc_address: '' })
          //   } else if (addressLength === 0) {
          //     this.formData.address.push({ loc_province: '', loc_city: '', loc_title: '', loc_address: '' })
          //   } else {
          //     Toast.fail('请填写完当前项后再进行添加！')
          //   }
          //   break
        case 1:
          if (personLength > 0 &&
this.formData.person[personLength - 1].relation !== '' &&
this.formData.person[personLength - 1].name !== '' &&
this.formData.person[personLength - 1].cardno !== '' &&
this.formData.person[personLength - 1].loc_address !== '') {
            // this.formData.person.push({
            //   relation: '',
            //   name: '',
            //   cardno: '',
            //   loc_province: '',
            //   loc_city: '',
            //   loc_title: '',
            //   loc_address: ''
            // })
          } else if (personLength === 0) {
            // this.formData.person.push({
            //   relation: '',
            //   name: '',
            //   cardno: '',
            //   loc_province: '',
            //   loc_city: '',
            //   loc_title: '',
            //   loc_address: ''
            // })
          } else {
            Toast.fail('请填写完当前项后再进行添加！')
          }
          break
      }
    },
    delBtn (type, itemId, index) {
      // return false
      this.$dialog.confirm({
        title: '确认删除？',
        message: '删除后不可恢复!'
      }).then(() => {
        switch (type) {
          case 'address':
            if (itemId) {
              deletePermitAddress({ id: itemId }).then(ret => {
                this.getShow()
              })
            } else {
              this.formData.address.splice(index, 1)
            }
            break
          case 'person':
            if (itemId) {
              deletePermitPerson({ id: itemId }).then(ret => {
                this.getShow()
              })
            } else {
              this.formData.person.splice(index, 1)
            }
            break
          case 'children':
            if (itemId) {
              deletePermitChildern({ id: itemId }).then(ret => {
                this.getShow()
              })
            } else {
              this.formData.children.splice(index, 1)
            }
            break
        }
      })
    },
    doAddress () {
      this.$dialog.alert({
        message: '暂停使用'
      })
      // return false
      // 数据处理
      let addressLength = this.formData.address.length
      if (addressLength > 0 && this.formData.address[addressLength - 1].loc_address !== '') {
        this.formData.address.forEach(item => {
          insertPermitAddress(item).then(ret => {
            if (ret.data.errcode === 0) {
              console.log(ret.data.data, '地址提交成功')
              // Toast.success('保存成功')
              this.$dialog.alert({
                message: '提交成功'
              }).then(() => {
                this.getShow()
              })
            } else {
              this.$dialog.alert({
                message: ret.data.errmsg
              })
            }
          })
        })
      } else {
        Toast.fail('不能提交空信息')
      }
    },
    doPerson () {
      this.$dialog.alert({
        message: '暂停使用'
      })
      // return false
      console.log('人员调用信息')
      let personLength = this.formData.person.length
      console.log(personLength, '人员长度')
      if (personLength > 0 && this.formData.person[personLength - 1].relation !== '' &&
          this.formData.person[personLength - 1].name !== '' &&
          this.formData.person[personLength - 1].cardno !== '' &&
          this.formData.person[personLength - 1].loc_address !== '') {
        for (let i = 0; i < personLength; i++) {
          const rtn = identityCodeValid(this.formData.person[i].cardno)
          console.log(rtn)
          if (!rtn.pass) {
            this.$dialog.alert({
              message: '请检查第' + (i + 1) + '组父母代办身份证格式'
            })
            // return false
          }
        }
        console.log('父母代办身份证无误')
        this.formData.person.forEach(item => {
          insertPermitPerson(item).then(ret => {
            if (ret.data.errcode === 0) {
              console.log('插入亲人成功', ret.data)
              this.$dialog.alert({
                message: '提交成功'
              }).then(() => {
                this.getShow()
              })
              /*   Toast.success('保存成功') */
            } else {
              this.$dialog.alert({
                message: ret.data.errmsg
              })
            }
          })
        })
      } else {
        Toast.fail('不能提交空信息')
      }
    },
    doChildren () {
      this.$dialog.alert({
        message: '暂停使用'
      })
      // return false
      let childrenLength = this.formData.children.length
      console.log(childrenLength)
      if (childrenLength > 0 && this.formData.children[childrenLength - 1].relation !== '' &&
          this.formData.children[childrenLength - 1].name !== '' &&
          this.formData.children[childrenLength - 1].cardno !== '') {
        for (let i = 0; i < childrenLength; i++) {
          const rtn = identityCodeValid(this.formData.children[i].cardno)
          console.log(rtn)
          if (!rtn.pass) {
            this.$dialog.alert({
              message: '请检查第' + (i + 1) + '组孩子代办身份证格式'
            })
            // return false
          }
        }
        console.log('孩子条件成功')
        this.formData.children.forEach(item => {
          insertPermitChildren(item).then(ret => {
            if (ret.data.errcode === 0) {
              this.$dialog.alert({
                message: '提交成功'
              }).then(() => {
                this.getShow()
              })
              /* Toast.success('保存成功') */
            } else {
              this.$dialog.alert({
                message: ret.data.errmsg
              })
            }
          })
        })
      } else {
        Toast.fail('不能提交空信息')
      }
    },
    // 通过openid获取tab页信息
    getShow () {
      console.log('tabs信息获取')
      // getPermitAddressList().then(ret => {
      //   if (ret.data.errcode === 0) {
      //     this.formData.address = ret.data.data
      //     console.log('当前地址', this.formData.address)
      //     if (this.formData.address.length === 0) {
      //       this.formData.address.push({ loc_province: '', loc_city: '', loc_title: '', loc_address: '' })
      //       console.log('地址追加', this.formData.address)
      //     }
      //   } else {
      //     Toast.fail('地址:' + ret.data.errmsg)
      //   }
      // })
      getPermitPersonList().then(ret => {
        if (ret.data.errcode === 0) {
          this.formData.person = ret.data.data
          console.log(this.formData.person, '11111')
          console.log(this.formData.person.length, '2222')
          if (this.formData.person.length === 0) {
            // this.formData.person.push({
            //   relation: '',
            //   name: '',
            //   cardno: '',
            //   loc_province: '',
            //   loc_city: '',
            //   loc_title: '',
            //   loc_address: ''
            // })
          }
        } else {
          Toast.fail('亲人:' + ret.data.errmsg)
        }
      })
      getPermitChildrenList().then(ret => {
        if (ret.data.errcode === 0) {
          this.formData.children = ret.data.data
          console.log(this.formData.children, '3333')
          console.log(this.formData.children.length, '4444')
          if (this.formData.children.length === 0) {
            // this.formData.children.push({ relation: '', name: '', cardno: '' })
          }
        } else {
          Toast.fail('孩子:' + ret.data.errmsg)
        }
      })
    }
  },
  mounted () {
    this.getOpenidInfoAction()
  },
  watch: {}
}
</script>

<style scoped>

    .container {
        width: 96%;
        margin-left: 2%;
    }

    .address-box {
        text-align: left;
    }

    .address-placeholder {
        color: #969799;
    }

    .inner-box {
        /*  margin-bottom: 3.625em;*/
    }

    .del-btn {
        /*margin-top: 20%;*/
    }

    /deep/ .van-tab {
        font-size: 0.775rem;
    }

    /deep/ .van-tabs__line {
        background-color: #4A9EFF;
    }

    /deep/ .van-tab--active {
        color: #4A9EFF;
    }

    .addBox {
        margin-top: 8px;
    }

    .div-bot {
        /*padding: 8px;*/
    }

    /*.div-bot .city-card-common-btn {*/
    /*    color: white;*/
    /*    font-size: 12px;*/
    /*    padding: 10px 0;*/
    /*    width: 100%;*/
    /*    border-radius: 5px;*/
    /*    text-align: center;*/
    /*    background-color: #7AB46D;*/
    /*    margin-bottom: 5px;*/
    /*}*/

    /deep/ .van-field__control {
        min-height: 28px !important;
        /*max-height: 60px !important;*/
    }

    .add—style >>> .van-button {
        position: relative;
        display: inline-block;
        box-sizing: border-box;
        width: 100%;
        height: 2.75rem;
        margin: 0;
        padding: 0;
        font-size: 1rem;
        line-height: 2.625rem;
        text-align: center;
        border-radius: 0.125rem;
        cursor: pointer;
        -webkit-transition: opacity .2s;
        transition: opacity .2s;
        -webkit-appearance: none;
    }

    .add—style span {
        font-size: 14px;
        color: #969799;
    }

    /deep/ .van-button__icon {
        color: #969799;
    }
    .div-bot {
        position: fixed;
        bottom: 0;
        width: 96%;
        /*left: 1%;*/
        /*right: 1%;*/
        /*width: 98%;*/
    }

    .div-bot >>> .van-button--info {
        border: 1px solid #75ACDC;
    }

    .div-bot >>> .van-button {
        height: 2.5rem;
    }

    .city-card-common-btn {
        color: white;
        font-size: 12px;
        padding: 0;
        width: 100%;
        border-radius: 5px;
        text-align: center;
        background-color: #75ACDC;
    }
    .van-tab__pane, .van-tab__pane-wrapper{
        padding-bottom: 50px;
    }
</style>
